<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
	String path = request.getContextPath();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>目录</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style>
body {
	font: normal 12px arial, tahoma, helvetica, sans-serif;
	margin: 0;
	padding: 20px;
}

.simpleTree {
	margin: 0;
	padding: 0;
	/*
	overflow:auto;
	width: 250px;
	height:350px;
	overflow:auto;
	border: 1px solid #444444;
	*/
}

.simpleTree li {
	list-style: none;
	margin: 0;
	padding: 0 0 0 34px;
	line-height: 14px;
}

.simpleTree li span {
	display: inline;
	clear: left;
	white-space: nowrap;
}

.simpleTree ul {
	margin: 0;
	padding: 0;
}

.simpleTree .root {
	margin-left: -16px;
	background: url(<%=path%>/commons/images/simpletree/root.gif) no-repeat
		16px 0 #ffffff;
}

.simpleTree .line {
	margin: 0 0 0 -16px;
	padding: 0;
	line-height: 3px;
	height: 3px;
	font-size: 3px;
	background: url(<%=path%>/commons/images/simpletree/line_bg.gif) 0 0
		no-repeat transparent;
}

.simpleTree .line-last {
	margin: 0 0 0 -16px;
	padding: 0;
	line-height: 3px;
	height: 3px;
	font-size: 3px;
	background: url(<%=path%>/commons/images/simpletree/spacer.gif) 0 0
		no-repeat transparent;
}

.simpleTree .line-over {
	margin: 0 0 0 -16px;
	padding: 0;
	line-height: 3px;
	height: 3px;
	font-size: 3px;
	background: url(<%=path%>/commons/images/simpletree/line_bg_over.gif) 0
		0 no-repeat transparent;
}

.simpleTree .line-over-last {
	margin: 0 0 0 -16px;
	padding: 0;
	line-height: 3px;
	height: 3px;
	font-size: 3px;
	background:
		url(<%=path%>/commons/images/simpletree/line_bg_over_last.gif) 0 0
		no-repeat transparent;
}

.simpleTree .folder-open {
	margin-left: -16px;
	background: url(<%=path%>/commons/images/simpletree/collapsable.gif) 0
		-2px no-repeat #fff;
}

.simpleTree .folder-open-last {
	margin-left: -16px;
	background:
		url(<%=path%>/commons/images/simpletree/collapsable-last.gif) 0 -2px
		no-repeat #fff;
}

.simpleTree .folder-close {
	margin-left: -16px;
	background: url(<%=path%>/commons/images/simpletree/expandable.gif) 0
		-2px no-repeat #fff;
}

.simpleTree .folder-close-last {
	margin-left: -16px;
	background: url(<%=path%>/commons/images/simpletree/expandable-last.gif)
		0 -2px no-repeat #fff;
}

.simpleTree .doc {
	margin-left: -16px;
	background: url(<%=path%>/commons/images/simpletree/leaf.gif) 0 -1px
		no-repeat #fff;
}

.simpleTree .doc-last {
	margin-left: -16px;
	background: url(<%=path%>/commons/images/simpletree/leaf-last.gif) 0
		-1px no-repeat #fff;
}

.simpleTree .ajax {
	background: url(<%=path%>/commons/images/simpletree/spinner.gif)
		no-repeat 0 0 #ffffff;
	height: 16px;
	display: none;
}

.simpleTree .ajax li {
	display: none;
	margin: 0;
	padding: 0;
}

.simpleTree .trigger {
	display: inline;
	margin-left: -32px;
	width: 28px;
	height: 11px;
	cursor: pointer;
}

.simpleTree .text {
	cursor: default;
}

.simpleTree .active {
	cursor: default;
	background-color: #F7BE77;
	padding: 0px 2px;
	border: 1px dashed #444;
}

#drag_container {
	background: #ffffff;
	color: #000;
	font: normal 11px arial, tahoma, helvetica, sans-serif;
	border: 1px dashed #767676;
}

#drag_container ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#drag_container li {
	list-style: none;
	background-color: #ffffff;
	line-height: 18px;
	white-space: nowrap;
	padding: 1px 1px 0px 16px;
	margin: 0;
}

#drag_container li span {
	padding: 0;
}

#drag_container li.doc,#drag_container li.doc-last {
	background: url(<%=path%>/commons/images/simpletree/leaf.gif) no-repeat
		-17px 0 #ffffff;
}

#drag_container .folder-close,#drag_container .folder-close-last {
	background: url(<%=path%>/commons/images/simpletree/expandable.gif)
		no-repeat -17px 0 #ffffff;
}

#drag_container .folder-open,#drag_container .folder-open-last {
	background: url(<%=path%>/commons/images/simpletree/collapsable.gif)
		no-repeat -17px 0 #ffffff;
}

.contextMenu {
	display: none;
}
</style>

<script src="<%=path%>/commons/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript"
	src="<%=path%>/commons/js/jquery.simple.tree.js"></script>
<script type="text/javascript">
	var simpleTreeCollection;
	$(document).ready(function() {
		simpleTreeCollection = $('.simpleTree').simpleTree({
			autoclose : true,
			afterClick : function(node) {
				//alert("text-"+$('span:first',node).text());
			},
			afterDblClick : function(node) {
				//alert("text-"+$('span:first',node).text());
			},
			afterMove : function(destination, source, pos) {
				//alert("destination-"+destination.attr('id')+" source-"+source.attr('id')+" pos-"+pos);
			},
			afterAjax : function() {
				//alert('Loaded');
			},
			animate : true
		//,docToFolderConvert:true
		});
	});
	
	//创建或选择tab
	function showPage(tabid,tabname,linkurl) {
	    var maintab=window.frames["top"].frames["workspace"].maintab;
	    var st = tabid;  //如"#t25"
	    var existhtml=window.frames["top"].frames["workspace"].$(st).html();
	    //判断tab是否存在
		if(existhtml != null ) {
			maintab.tabs('select',st);
		} else {
			maintab.tabs('add',st, tabname);
			window.frames["top"].frames["workspace"].$(st,"#tabs").load(linkurl);
		}
	}
</script>
</head>
<body>
	<div class="contextMenu" id="myMenu1">
		<ul>
			<li id="add"><img
				src="<%=path%>/commons/images/simpletree/folder_add.png" /> Add
				child</li>
			<li id="reload"><img
				src="<%=path%>/commons/images/simpletree/arrow_refresh.png" />
				Reload</li>
			<li id="edit"><img
				src="<%=path%>/commons/images/simpletree/folder_edit.png" /> Edit</li>
			<li id="delete"><img
				src="<%=path%>/commons/images/simpletree/folder_delete.png" />
				Delete</li>
		</ul>
	</div>
	<div class="contextMenu" id="myMenu2">
		<ul>
			<li id="edit"><img
				src="<%=path%>/commons/images/simpletree/page_edit.png" /> Edit</li>
			<li id="delete"><img
				src="<%=path%>/commons/images/simpletree/page_delete.png" /> Delete</li>
		</ul>
	</div>
	<ul class="simpleTree">
		<li class="root" id='1'><span><s:property value="rootName" /></span>
			<ul>

				<li class="open" id='2'><span>Test Tree Node</span>
					<ul>

						<li id='3'><span>Refresh Node</span>
							<ul class="ajax">
								<li id='4'>{url:loadTree.action?tree_id=1}</li>
							</ul></li>

					</ul></li>

				<li id='5'><span>系统管理</span>
					<ul>

						<li id='6' ><span onClick="javascript:showPage('#t01','用户管理','../system/user_manage.html');">用户管理</span>
						<li id='7'><span onClick="javascript:showPage('#t02','菜单管理','../system/menu_manage.html');">菜单管理</span></li>
						<li id='8'><span onClick="javascript:showPage('#t03','角色管理','../system/role_manage.jsp');">角色管理</span></li>
						<li id='9'><span onClick="javascript:showPage('#t04','test','../system/test2.html');">test</span></li>


					</ul></li>

			</ul></li>

	</ul>

</body>

</html>
